<!DOCTYPE html>
<html lang="zh-cn">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.layout {
			font-size: 20px;
		}
		.search {
			width: 1400px;
			margin: 0 auto;
		}
		.search button {
			font-size: 20px;
			height: 30px;
			vertical-align: middle;
		}
		.search input {
			height: 30px;
			vertical-align: middle;
			box-sizing: border-box;
		}
		.info {
			width: 1400px;
			margin: 30px auto 0;
		}
		.info  table {
			width: 1000px;
			border: 1px solid #ccc;
			border-collapse: collapse;
		}
		.info  table th ,
		.info  table td {
			border: 1px solid #ccc;
			text-align: center;
			height: 40px;
		}
	</style>
</head>

<body>
	<div class="layout">
		<div class="search">
			<span>价格查询:</span>
			<input type="text" class="min_price">-<input type="text" class="max_price">
			<button class="btn_price">搜索</button>


			<span style="margin-left: 80px;">按照商品名称查询:</span>
			<input type="text" class="txt_product">
			<button class="btn_product">搜索</button>
		</div>

		<div class="info">
			<table>
				<thead>
					<tr>
						<th>ID</th>
						<th>产品名称</th>
						<th>价格</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>1</td>
						<td>iphone12</td>
						<td>6299</td>
					</tr>
					<tr>
						<td>2</td>
						<td>iphone12</td>
						<td>6299</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>


	<script>
	// 输入两个价格，在两个价格之间进行查找，并输出对应的商品
	// 要求：
		// 根据价格区间搜索商品 [min , max]
		// 根据商品名称搜索商品


	</script>
</body>

</html>